<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
          <div class="div-tip">已确认状态下，报警状态未恢复，不会再次产生二次报警。</div>
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          actionWidth="100"
        >
          <template #actionButton="{ row }">
            <el-button
              type="text"
              :disabled="row.monitorConfirmState !== '未确认'"
              @click="sysMonitorConfirm(row)"
              v-hasPermi="['sysMonitor:confirm']"
              >确认</el-button
            >
          </template>
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/hdwarning/immediate.js";
import { ElMessageBox } from "element-plus";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";

const unitList = ref([]);
const { proxy } = getCurrentInstance();

const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    [
      "monitorType",
      "monitorName",
      "monitorParam",
      "monitorLevel",
      "monitorConfirmState",
      "monitorState",
      "monitorStartTime",
      "monitorEndTime",
    ].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const sysMonitorConfirm = (row) => {
  ElMessageBox.prompt("请输入确认说明", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",

    inputErrorMessage: "请输入",
  })
    .then(({ value }) => {
      APIS.sysMonitorConfirm({
        id: row.id,
        monitorExplain: value,
      }).then((res) => {
        getList();
      });
    })
    .catch(() => {});
};
const { fetchData, getList, queryParams, form, handleExport } = useAsyncData({
  APIS: {
    query: APIS.sysMonitor,
    url: "/sysMonitor/",
  },
  formJson,
  table,
  proxy,
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
.div-tip{
  color: orange;
  height: 30px;
  line-height: 30px;
  margin-left: 20px;
}
</style>
